<template lang="html">
  <div class="">
    <div class="top">
      <img src="../assets/images/prizetop.png" alt="">
    </div>
    <div class="box">
      <div class="title">
        我的中奖
      </div>
      <div class="prize">
        <div v-if="prize.length==0" class="noprize">
          当前暂无任何奖品
        </div>
        <div v-for="(item,index) in prize" class="prizeitem">
          <div class="name">{{item.mc}}</div>
          <div class="time">—— 领取时间:{{item.lqsj}} ——</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import utils from './../js/utils';
export default {
  data(){
    return {
      prize:[],
      openId:""
    }
  },
  methods:{
    EncodeUtf8(s1)
        {
              var s = escape(s1);
              var sa = s.split("%");
              var retV ="";
              if(sa[0] != "")
              {
                 retV = sa[0];
              }
              for(var i = 1; i < sa.length; i ++)
              {
                   if(sa[i].substring(0,1) == "u")
                   {
                       retV += Hex2Utf8(Str2Hex(sa[i].substring(1,5)));
                   }
                   else retV += "%" + sa[i];
              }

              return retV;
        }
  },
  mounted(){
    var that=this;
    if(!that.$route.query.openid&&!localStorage.getItem("openid")){
      console.log("获取授权地址");
      //TODO获取授权地址授权成功后回调并带回openid
      location.href=utils.AJAX_SRC +'ddfwap/Index?backurl='+that.EncodeUtf8(location.href);
    }else{
      //TODO获取中奖信息覆给prize
      that.openId=!that.$route.query.openid?localStorage.getItem("openid"):that.$route.query.openid ;
      localStorage.setItem('openid',that.openId);
      utils.ajax(utils.AJAX_SRC +'ddfwap/GetMyprize' , {hdid:3,openid:that.openId}).
          then(result=>{
            console.log(result)
            if(result.code === -1) {
            }
            if(result.code === 1) {
               that.prize = result.data.list;
            }
         });
    }
  }
}
</script>

<style lang="css" scoped>
body{
  height: 100%;
  width: 100%;
  max-width:36rem;
  background-color: #FFF000;
  background-repeat: no-repeat;
  background-size:100% 100%;
  background-position: top center;
  background-size: cover;
}
.top{
  width: 100%;
  height: auto;
}
.top img{
  width: 100%;
}
.box{
  width: 90%;
  min-height: 28rem;
  margin: 2% 5%;
  background-color: #FEF9C5;
}
.title{
  margin: 1rem;
  border-bottom: 2px dashed #D2AF7A;
  text-align: center;
  line-height: 2rem;
  color: #FC535F;
  font-size: .8rem;
  font-weight: 500;
}
.noprize{
  text-align: center;
  padding-top: 3rem;
  color: 	#696969;
}
.prize{
  text-align: center;
}
.prizeitem{
  width: 80%;
  height: 3rem;
  margin: auto;
  background-color: #FF5867;
  position: relative;
  margin-top: 1rem;
  padding: 0.5rem;
}

.prizeitem:before, .prizeitem:after {
    content: ' ';
    width: 0;
    height: 100%;
    /* 绝对定位进行偏移 */
    position: absolute;
    top: 0;
}

.prizeitem:before {
    /* 圆点型的border */
    border-right: 10px dotted white;
    /* 偏移一个半径，让圆点的一半覆盖div */
    left: -5px;
}

.prizeitem:after {
    /* 圆点型的border */
    border-left: 10px dotted white;
    /* 偏移一个半径，让圆点的一半覆盖div */
    right: -5px;
}
.prizeitem .name{
  color:#FFFA7A;
  font-size: 1.2rem;
  line-height: 1.8rem;
}
.prizeitem .time{
  color:#ffffff;
  font-size: .6rem;
  line-height: 1.2rem;
}
</style>
